
<template>
  <div class="myEditor">
    <wangeditor
      :ref="editorRef"
      :isSeparateHeadBody="configDefault.isSeparateHeadBody"
      :menus="configDefault.menus"
      :height="configDefault.height"
      :onchangeTimeout="configDefault.onchangeTimeout"
      :zIndex="configDefault.zIndex"
      :pasteFilterStyle="configDefault.pasteFilterStyle"
      :pasteIgnoreImg="configDefault.pasteIgnoreImg"
      :colors="configDefault.colors"
      :isContenteditable="isContenteditable"
      :msg="childModel"
      v-bind="$attrs"
      v-on="$listeners"
      @callbackPasteTextHandleEditor="pasteTextHandleEditor"
      @callbackChangeEditor="editorChange"
      @callbackFocusEditor="editorFocus"
      @callbackBlurEditor="editorBlur"
    >
    </wangeditor>
  </div>
</template>

<script>
import wangeditor from "@/components/wangeditor/wangeditor.vue";
export default {
  name: "myEditor",
  components: {
    wangeditor,
  },
  props: {
    editorRef: {
      type: String,
      default() {
        return "vueEditor";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组编辑框
      type: [String, Number],
      default() {
        return 1;
      },
    },
    isContenteditable: {
      // 当前组件是否禁用 disabled
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: this.model || "",
      configDefault: {
        isSeparateHeadBody: false,
        menus: [
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "quote", // 引用
          // "emoticon", // 表情
          "image", // 插入图片
          "table", // 表格
          // "video", // 插入视频
          "code", // 插入代码
          "undo", // 撤销
          "redo", // 重复
        ],
        height: 300,
        onchangeTimeout: 100,
        zIndex: 1,
        pasteFilterStyle: false,
        pasteIgnoreImg: true,
        showLinkImg: false,
        colors: [
          "#000000",
          "#eeece0",
          "#1c487f",
          "#4d80bf",
          "#c24f4a",
          "#8baa4a",
          "#7b5ba1",
          "#46acc8",
          "#f9963b",
          "#ffffff",
        ],
        editorIdName: "editor",
      },
    };
  },
  watch: {
    childModel: function (val) {
      this.$emit("update:model", val);
    },
    model(val) {
      // this.init ++;
      // if (val !== this.childModel) {
      this.childModel = val;
      // }
      // if (this.init == 1) {
      //   this.msg = val
      // }
    },
    formConfigData: {
      handler(newVal, objVal) {
        let formConfigObj = this.formConfigData
          ? this.formConfigData[this.fromSource] ||
            this.formConfigData[this.modelKey]
          : {};
        let cfg = this.config ? eval("(" + this.config + ")") : {};
        //库里的config配置项优先级最高
        this.configDefault = Object.assign(
          {},
          this.configDefault,
          cfg,
          this.formConfigData["publicAttr"],
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    pasteTextHandleEditor(obj) {
      this.$emit(
        "pasteTextHandleEditorCallback",
        this.modelKey + "_" + this.which,
        obj
      );
    },
    editorChange(newVal) {
      this.$emit("changeCallback", this.modelKey + "_" + this.which, newVal);
    },
    getEditor() {
      //  放在changeEditor里会使插入表格输入异常
      const textCont = this.$refs["myEditor"]
        ? this.$refs["myEditor"].getEditorContentText()
        : "";
      const htmlCont =
        this.$refs["myEditor"] && textCont && textCont.length > 0
          ? this.$refs["myEditor"].getEditorContentHtml()
          : "";
      const contentObj = {
        html: htmlCont,
        Text: textCont,
      };
      this.childModel =
        htmlCont && htmlCont.indexOf("<table>") > -1
          ? htmlCont
              .replace(/<table/g, "<table border='1'")
              .replace(/border="0"/g, "")
          : htmlCont;
      return this.childModel;
    },
    editorFocus(newVal) {
      this.$emit("focusCallback", this.modelKey + "_" + this.which, newVal);
    },
    editorBlur(newVal) {
      this.childModel = this.getEditor();
      this.$emit("blurCallback", this.modelKey + "_" + this.which, newVal);
    },
  },
};
</script>

<style>
</style>